<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* 选择器: 选中页面中的元素; */
            /* 元素选择器 */
            div {
                width: 200px;
                height: 200px;
                background: yellow;
                margin-bottom: 20px;
            }
            

            .red {
                background: red;
            }
            
            div.border {
                border: 1px solid black;
            }

            p {
                width: 200px;
                height: 200px;
            }

            /* 子代选择器 */
            /*div>span {
                color: blue;
            }*/
            
            /* 后代选择器 */
            div span {
                color: blue;
            }
            
            /* 相邻兄弟选择器 */
            .box+p {
                background: blue;
            }
            
            

        </style>
    </head>
    <body>

        <div></div>
        <div class="red border"></div>
        <p class="red border"></p>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <p></p>

        <div>
            <span>你好</span>
            <p>
                <span>hello</span>
            </p>
        </div>

        <p>
            <span>你好</span>
        </p>

        <div class="box">11</div>
        <p>222</p>
        <div class="wrap">333</div>
        <p>444</p>
        
    </body>
</html>